<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="能源管理—昼夜分析"></Header>

    <section class="search_bar">
      <!-- 1 -->
      <el-radio-group v-model="radio" @change="changeSelect1">
        <el-radio-button label="电"></el-radio-button>
        <el-radio-button label="水"></el-radio-button>
      </el-radio-group>
      <!-- 2 -->
      <LSelect width="250" label="分项" placeholder="请选择" style="margin:3px 0 0 20px;" :value="a" :options="option1"></LSelect>
      <LSelect width="250" label="对象选择" placeholder="请选择" style="margin:3px 0 0 20px;" :value="a" :options="option1"></LSelect>
      <!-- 3 -->
      <el-radio-group v-model="radio1" style="margin-left: 20px;" @change="changeSelect2">
        <el-radio-button label="日"></el-radio-button>
        <el-radio-button label="周"></el-radio-button>
        <el-radio-button label="月"></el-radio-button>
        <el-radio-button label="年"></el-radio-button>
        <el-radio-button label="自定义"></el-radio-button>
      </el-radio-group>
      <LDateTimeSelect3 label="选择时间" style="margin:3px 0 0 5px;" :value="t1" @subtime-event="getNewTime1" v-if="radio1 === '日'"></LDateTimeSelect3>
      <LDateTimeSelect2 label="选择时间" style="margin:3px 0 0 5px;" :value="t2" @time-event="getNewTime2" v-else-if="radio1 === '周'"></LDateTimeSelect2>
      <LDateTimeSelect4 label="选择时间" style="margin:3px 0 0 5px;" :value="t3" @month-event="getNewTime3" v-else-if="radio1 === '月'"></LDateTimeSelect4>
      <LDateTimeSelect5 label="选择时间" style="margin:3px 0 0 5px;" :value="t4" @year-event="getNewTime4" v-else-if="radio1 === '年'"></LDateTimeSelect5>
      <LDateTimeSelect2 label="选择时间" style="margin:3px 0 0 5px;" :value="t5" @time-event="getNewTime5" v-else></LDateTimeSelect2>
      <!-- 4 -->
      <LDateTimeSelect6 label="选择小时" style="margin:3px 0 0 20px;" :value="hour" @hour-event="getNewHour"></LDateTimeSelect6>
      <!-- 5 -->
      <LButton label="查询" style="margin:0px 0 0 30px;"></LButton>
    </section>
    <!-- 分区 -->
    <div class="area">
      <div class="area-1">
        <div style="font-size:10px;float:left">单位：kWh</div>
        <Cfour width="100%" height="880px"></Cfour>
      </div>
      <div class="area-2">
         <Cthree width="100%" height="880px"></Cthree>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import * as echarts from "echarts";
import Header from "@/components/Header";
import LSelect3 from "@/components/LSelect3.vue";
import LDateTimeSelect3 from "@/components/LDateTimeSelect3.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LDateTimeSelect4 from "@/components/LDateTimeSelect4.vue";
import LDateTimeSelect5 from "@/components/LDateTimeSelect5.vue";
import LButton from "@/components/LButton.vue";
import Cfour from "@/components/Cfour";
import LSelect from "@/components/LSelect.vue";
import LDateTimeSelect6 from "@/components/LDateTimeSelect6.vue";
import Cthree from "@/components/Cthree";

export default {
  components: {
    Header,
    LSelect3,
    LDateTimeSelect3,
    LDateTimeSelect2,
    LDateTimeSelect4,
    LDateTimeSelect5,
    LButton,
    Cfour,
    LSelect,
    LDateTimeSelect6,
    Cthree,
  },
  data() {
    return {
      radio: "电",
      radio1: "日",
      a: "",
      t1: new Date(),
      t2: null,
      t3: null,
      t4: null,
      t5: null,
      b: "3506.17",
      c1: "3506.17",
      c2: "3506.17",
      c3: "3506.17",
      c4: "3506.17",
      hour: [],

      
      xAxisData1: [],
      seriesData1: [], // 第一组 月度温湿度数据

      option1: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
    };
  },

  mounted() {
  },
  beforeUnmount() {},
  methods: {
    getNewTime1(t) {
      console.log("t1+++", t);
      this.t1 = t;
    },
    getNewTime2(t) {
      console.log("t2+++", t);
      this.t2 = t;
    },
    getNewTime3(t) {
      console.log("t3+++", t);
      this.t3 = t;
    },
    getNewTime4(t) {
      console.log("t4+++", t);
      this.t4 = t;
    },
    getNewTime5(t) {
      console.log("t5+++", t);
      this.t5 = t;
    },
    changeSelect1(val) {
      this.radio = val;
      console.log("this.radio:", this.radio);
    },
    changeSelect2(val) {
      this.radio1 = val;
      console.log("this.radio1:", this.radio1);
      switch (this.radio1) {
        case "日":
          this.t1 = new Date();
          return;
        case "周":
          let a = new Date();
          let b = a.setDate(a.getDate() - 6);
          this.t2 = [new Date(b), new Date()];
          return;
        case "月":
          this.t3 = new Date();
          return;
        case "年":
          this.t4 = new Date();
          return;
        case "自定义":
          this.t5 = [];
          return;
      }
      console.log("选项卡片", this.t1);
      console.log("选项卡片", this.t2);
      console.log("选项卡片", this.t3);
      console.log("选项卡片", this.t4);
      console.log("选项卡片", this.t5);
    },
    getNewHour(t) {
      console.log("hour:", t);
      this.hour = t;
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../OperaManage/opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/deep/ .el-radio-button__inner {
  border: none;
}

/deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
}

.area {
  display: flex;
  justify-content: space-between;

  .area-1 {
    width: 60%;
    height: 86vh;

    /deep/ .el-input,
    .el-textarea__inner {
      border: 1px solid #72aeff;
      border-radius: 5px;
      background-color: transparent;
      width: 100px;
    }
  }

  .area-2 {
    width: 40%;
    height: 86vh;
  }
}
</style>
